// 主题样式
$bg-color: #f5f7fb;
$size: 7px;
$color: rgba(0, 0, 0, 0.5);

$color-000: rgb(44, 47, 81);
$color-fff: #fff;

// AButton 组件去除阴影
.ant-btn {
  box-shadow: none;
}

// 左侧菜单栏和顶部标签模块自适应样式
.page-header,
.page-tab,
aside.absolute {
  font-size: 0.9vw !important;
}

.page-tab .ant-tabs-tab {
  font-size: 0.9vw !important;
}

.page-header .dark-mode-container {
  font-size: 0.9vw !important;
}

aside.absolute .menu-wrapper .ant-menu-item,
aside.absolute .menu-wrapper .ant-menu-submenu-title {
  font-size: 0.9vw !important;
}

.page-tab .page-tab__content {
  font-size: 0.9vw !important;
}

.page-tab .page-tab__content .ant-tabs-tab {
  font-size: 0.9vw !important;
}

aside.absolute {
  .bg-container.color-1 {
    background: $bg-color;

    .home-logo {
      background-color: #f5f7fb;
      // background: lightblue;

      h2 {
        color: #1f77b4;
      }
    }

    .menu-wrapper {
      background-color: #f5f7fb;

      .ant-menu-submenu {
        color: inherit;
      }

      .ant-menu-item {
        color: #3e3d32 !important;
      }

      .ant-menu-item-selected {
        color: #000000 !important;
      }

      .ant-menu-item:not(.ant-menu-submenu-selected):hover {
        background-color: #c6e0f7;
        color: #000000 !important;
        border-radius: 5px;
      }

      .ant-menu-submenu-title:hover {
        background-color: #c6e0f7;
        color: #000 !important;
        border-radius: 5px;
      }

      .ant-menu-item-active {
        color: #000000;
      }

      .ant-menu-submenu {
        &.ant-menu-submenu-selected {
          > .ant-menu-submenu-title {
            background-color: #1f77b4;
            color: #fff;
            border-radius: 5px;
          }
        }
      }

      .select-menu {
        .ant-menu-inline {
          .ant-menu-item-selected {
            background-color: v-bind(selectedBgColor);
            color: #0b65ff !important;
          }
        }
      }
    }
  }

  .bg-container.color-2 {
    background-color: #242323;
    .home-logo {
      background-color: $color-000;

      h2 {
        color: #fff;
      }
    }
    .menu-wrapper {
      background-color: $color-000;
      .ant-menu {
        color: $color-fff;
      }
      .ant-menu-submenu,
      .ant-menu-item {
        color: $color-fff;
      }

      .ant-menu-item-selected {
        color: $color-000 !important;
      }

      .ant-menu-submenu {
        .ant-menu-submenu-title:hover {
          background-color: $color-fff;
          color: $color-000 !important;
        }
      }
      .ant-menu-item:hover {
        background-color: $color-fff;
        color: $color-000 !important;
      }

      .ant-menu-item-active {
        color: $color-fff;
      }

      .ant-menu-submenu {
        &.ant-menu-submenu-selected {
          > .ant-menu-submenu-title {
            color: $color-fff;
          }
        }
      }

      .ant-menu-dark .ant-menu-item-selected {
        background-color: #1677ff;
      }
    }
  }

  .ant-menu {
    background: transparent !important;
  }
}

.page-header {
  background: $bg-color;

  .ant-menu,
  .bg-container {
    background: transparent !important;
  }
}

// table自定义调整样式

.table-card {
  .ant-card-head {
    min-height: 30px;
  }

  .ant-card-body {
    padding: 1px;
    padding-bottom: 12px;
  }
}

.ant-table-wrapper {
  .ant-spin-nested-loading {
    height: 100%;

    .ant-spin-container {
      height: 100%;

      .ant-table {
        height: calc(100% - 40px);

        .ant-table-container {
          height: 100%;

          .ant-table-body {
            height: calc(100% - 40px);
            overflow: auto;

            tbody.ant-table-tbody {
              height: 100%;
              tr {
                // &:not(.ant-table-placeholder):hover {
                //   td {
                //     background-color: rgba(86, 205, 243, 0.3);
                //   }
                // }
                // .ant-table-cell {
                //   background-color: transparent;
                // }
                td {
                  padding: 0;
                }
              }
            }
          }

          .ant-table-content {
            height: 100%;

            table {
              height: 100%;

              .ant-table-tbody {
                height: calc(100% - 40px);
                overflow: auto;
                tr {
                  td {
                    padding: 0 !important;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.ant-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-wrapper .ant-table-tbody > tr.jl-table-row-selected > td,
.ant-table-wrapper .ant-table-tbody > tr.jl-table-row-selected > td.ant-table-cell-row-hover,
.ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover {
  background: rgb(186, 234, 250);
}
.ant-table-wrapper .ant-table-tbody > tr.jl-table-row-error > td {
  background: rgba(244, 56, 56, 0.7);
}

.surely-table-wrapper {
  height: 100%;
  .ant-spin-nested-loading {
    height: 100%;
    .ant-spin-container {
      height: 100%;
      .surely-table {
        height: calc(100% - 40px);
      }
      .surely-table-footer {
        padding: 8px;
      }
    }
  }
  .surely-table-row.surely-table-row-hover {
    background-color: #e6f7ff;
  }
  &.no-has-pagination-table {
    .surely-table {
      height: 100% !important;
    }
  }
}

.surely-table.surely-table-small .surely-table-cell-inner .surely-table-cell-content {
  padding: 0 8px;
}

.jl-form {
  .ant-input-number-input,
  .ant-select-selector {
    height: 22px !important;

    .ant-select-selection-item,
    input,
    .ant-select-selection-placeholder {
      height: 22px !important;
      line-height: 22px;
    }
  }

  .ant-input {
    margin-top: -3px;
  }

  .ant-picker-input {
    input {
      height: 22px !important;
      line-height: 22px;
    }
  }

  .ant-btn {
    height: 22px !important;
    line-height: 18px !important;
    padding: 2px 6px 2px 1px !important;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
  }

  .ant-form-item {
    margin-bottom: 8px;
  }

  .ant-select-selector {
    .ant-select-selection-overflow {
      .ant-select-selection-overflow-item {
        .ant-select-selection-item {
          height: 20px !important;
          line-height: 20px;
          margin-top: -3px;
        }
      }
    }
  }
}

.mini-btn {
  height: 25px !important;
  line-height: 25px !important;
  padding: 2px 4px 2px 1px !important;
  font-size: 12px;
  display: inline-flex !important;
  align-items: center;
}

.ant-form-item .ant-form-item-control-input-content {
  flex: auto;
  width: 100%;
  align-items: center;
  display: flex;
  .flex {
    width: 100%;
  }
}

.min-form-control {
  height: 25px !important;
  line-height: 25px;

  &.ant-input,
  .ant-input-number-input-wrap,
  .ant-input-group,
  .ant-select-selector {
    height: 25px !important;

    .ant-select-selection-item,
    .ant-select-selection-placeholder,
    .ant-input-group-addon,
    input {
      height: 24px !important;
      line-height: 24px;
    }

    .ant-input-group-addon {
      .ant-input-search-button {
        height: 25px !important;
        line-height: 25px;
      }
    }
  }

  .ant-input-group-addon {
    position: relative;
    min-width: 30px;
    .ant-input-search-button {
      position: absolute;
      top: -3px;
      right: 0;
    }
  }

  .ant-picker-input {
    input {
      height: 25px !important;
      line-height: 25px;
    }
  }
}

.search-card {
  .ant-card-body {
    padding: 5px 25px;
  }
}

.ant-card {
  .ant-card-head {
    .ant-card-head-title,
    .ant-card-extra {
      display: flex;
      align-items: center;
    }
  }
}

.menu-select-search-popup {
  .ant-select-tree-node-selected {
    background-color: rgb(36, 124, 254) !important;
    .ant-select-tree-title {
      color: #fff;
    }
  }
}

.ant-tabs {
  &.ant-tabs-card {
    .ant-tabs-nav {
      .ant-tabs-tab {
        &.ant-tabs-tab-active {
          background-color: rgb(221, 221, 221);
        }
      }
    }
  }
}

.popup-item {
  cursor: pointer;
  padding: 5px 8px;
  height: 30px;
  line-height: 30px;
  box-sizing: content-box;
  position: relative;

  :first-child {
    margin-right: 8px;
    display: inline-block;
  }

  &:last-child {
    &::after {
      content: '';
      border: none;
    }
  }
  &::after {
    bottom: 0;
    left: 5%;
    position: absolute;
    content: '';
    display: inline-block;
    width: 90%;
    border: 1px dashed #646cff;
  }

  &:hover {
    background-color: var(--surely-table-row-hover-bg);
  }

  &.disabled {
    color: var(--surely-table-disabled-color);
    cursor: not-allowed;
  }
}

#app .surely-table-body-contextmenu-container {
  border: 1px solid rgb(36, 124, 254);
}

// 定义一些常用色
:root {
  --primary-color: var(--soy-primary-color);
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #f5222d;
}

$color: #dfe2ea;
$size: 7px;

/* 为滚动条添加样式 */
*::-webkit-scrollbar {
  width: $size;
  /* 设置滚动条宽度 */
  height: $size;
  /* 设置滚动条高度 */
}

*::-webkit-scrollbar-thumb {
  background-color: $color;
  /* 滚动条颜色 */
  border-radius: $size;
  /* 滚动条圆角 */
}

*::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  /* 滚动条轨道颜色 */
}

/* 兼容非Webkit浏览器的滚动条样式设置 */
* {
  scrollbar-width: thin;
  /* 设置滚动条宽度 */
  scrollbar-color: $color #f0f0f0;
  /* 设置滚动条颜色 */
}

// 常用动画

// 流水线
@keyframes antv-x6-line {
  to {
    stroke-dashoffset: -1000;
  }
}
